---
title: Outlines
---

This example implements the outline postprocessing pass, based on this Vanilla Three.js [example](https://threejs.org/examples/?q=outline#webgl_postprocessing_outline).

An outlined cube loops through a maze, with a different outline color when the object is hidden.

<Example path="postprocessing/outline" />

## How it works

A mesh is created in `App.svelte` and passed into both `Scene.svelte` and `CustomRenderer.svelte`.

### Scene

The scene is responsible for setting up the walls, floor, and attaching a geometry and material to the mesh while the custom renderer adds the mesh to the outline effects selection set.

### CustomRenderer

Both passes that are added to the composer rely on the camera from the threlte context so they can are derived anytime the camera changes. When either of the passes updates, the composer's passes are reset and the updated passes are added to the composer.
